


Mis pruebas con Ao3

by mariv2320



Category: Ninguno
Language: Español
Status: In-Progress
Published: 2019-12-13
Updated: 2021-01-31
Packaged: 2021-02-25 20:47:09
Rating: Not Rated
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 2
Words: 394
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/21781681
Author URL: https://archiveofourown.org/users/mariv2320/pseuds/mariv2320
Kudos: 6





	1. Prueba de Imagen responsive - Tutorial

Estoy probando subir imágenes con formato responsive para que pueda ver en múltiples dispositivos usando etiqueta la etiqueta de html "img" y modificando sus propiedades css.

__________________________________________________

¿Por qué hacer esto? Me comentaron que las imágenes grandes en Ao3 no se ven proporcionadas automáticamente en pantallas pequeñas como lo hace Wattpad, es decir no son responsive. Que algo sea responsive quiere decir que se adapta a la pantalla de cualquier teléfono celular o computador.

Es decir que las imágenes se ven así:

Cuando las imágenes deberían verse así:

Mejor ¿verdad?

\-----------------------------------------------------

¿Como lograr esto?

Debes agregar el valor " width="100%" " en la etiqueta "img" que esta del lado del editor HTML.

Ya te explico mejor, tranquis.

Tu estas aquí, editando tu capítulo y subiendo tus imágenes.

Luego te aparece esta ventana. Donde dice "Source" pegas el enlace de la Imagen que quieres subir y le das a guardar.

Hasta ahora todo bien, pero es momento de cambiar al editor HTML.

Ahí buscas la etiqueta "Img". Busca con calma y paciencia si tienes mucho texto, no desesperes ;)

La etiqueta es seguida por un símbolo de igual (=) y abre con comillas ( " ) debes buscar donde terminan esas comillas, dejas un espacio y colocas el valor width="100%"  
Justo entre las ultimas comillas y el símbolo de slash ( / ).

Y eso es todo

_________________________________________________________

El Valor width="100%" lo puedes modifica por otro porcentaje para jugar con el tamaño de la imagen tanto en computador como en teléfono, esto lo haces cuando las imágenes a subir son mas largas que anchas y conseguir un equilibrio es entre ambos tamaños, sino podría verse muy grande computadora y perfecto en teléfono.

Te aconsejo un 70% si la imagen es larga, es un intermedio aceptable entre computador y teléfono.

Sí el valor de Width es menor al 100% deberás añadir otro valor seguido de width que es align="center"  
Esto hará que la imagen se alinee al centro de la pantalla y no se vea todo pegado a la izquierda.

es decir que la etiqueta img quedaría de la siguiente manera:

<img src="https://este_es_un_enlace_de_imagen" width="70%" align="center" />

Si la imagen es cuadrada, mas ancha que larga o no están taaaan larga, esta parte no será necesaria.

______________________________

Espero esto te sea útil y si no se entiende algo deja un comentario con tu duda y lo responderé lo mejor que pueda ❤


	2. prueba 2

**Summary for the Chapter:**

> esto es una prueba


End file.
